$("#one").css({
    height: 40,
    width: "100%",
    backgroundColor: "white",
    borderBottom: "1px solid gainsboro"
})
$("#two-con-right span").eq(3).css({
    color: "skyblue",
    border: "1px solid skyblue",
    display: "inlineBlock"
})
$("#two-con-right span").eq(4).css({
    color: "#ff5240"
})
$("#span").eq(0).css({
    color: "gray"
})
$("#con>span,#con-a>span").eq(0).css({
    color: "gray",

})
$("#con-a>span").eq(0).css({
    color: "gray",

})
$("#con-b>span").eq(0).css({
    color: "gray"
})
$("#con>span:odd").css({
    color: "white",
    backgroundColor: "#ff5240",
    marginLeft: 22,
    marginRight: 10
})
$("#con>span").eq(3).css({

    marginLeft: 50,

})
$("#con>span").eq(5).css({

    marginLeft: 50,

})
$("#con-a>span").eq(1).css({
    color: "white",
    backgroundColor: "green",
    marginLeft: 22,
})
$("#con-b>span").nextAll().css({
    border: "1px solid skyblue",
    marginLeft: 22,
})
$("#four>img").eq(1).css({
    height: 200
})

$("#four>img").eq(3).nextAll().css({
    height: 1000
})

$("#four>img").eq(16).css({
    height: 3000
})
$("#four>img").eq(18).css({
    height: 400
})
$("#four>img").eq(25).css({
    height: 400
})

class Mk {
    constructor(smallBox, mask, bigBox, lis) {
        this.smallBox = smallBox;
        this.mask = mask;
        this.bigBox = bigBox;
        this.lis = lis;

    }
    mouseover() {
        let that = this;
        this.smallBox.onmouseover = function() {
            that.mask.style.display = "block";
            that.bigBox.style.display = "block";
        }
    }

    // 第二步，划出隐藏mask和bigBox
    mouseout() {
        let that = this;
        this.smallBox.onmouseout = function() {
            that.mask.style.display = "none";
            that.bigBox.style.display = "none";
        }
    }
    mousemove() {
        let that = this;
        this.smallBox.onmousemove = function(evt) {
            let e = evt || event;
            let left = e.pageX - this.offsetLeft - that.mask.offsetWidth / 2;
            let top = e.pageY - this.offsetTop - that.mask.offsetHeight / 2;
            if (left < 0) {
                left = 0
            }
            let maxLeft = this.offsetWidth - that.mask.offsetWidth;
            if (left > maxLeft) {
                left = maxLeft
            }
            if (top < 0) {
                top = 0
            }
            let maxTop = this.offsetHeight - that.mask.offsetHeight;
            if (top > maxTop) {
                top = maxTop
            }
            that.mask.style.left = left + "px";
            that.mask.style.top = top + "px";
            let x = left * that.bigBox.offsetWidth / that.mask.offsetWidth;
            let y = top * that.bigBox.offsetHeight / that.mask.offsetHeight;
            that.bigBox.style.backgroundPositionX = -x + "px";
            that.bigBox.style.backgroundPositionY = -y + "px";
        }
    }
    clickLi() {
        for (let i = 0; i < this.lis.length; i++) {
            let that = this;
            this.lis[i].onclick = function() {
                that.smallBox.style.backgroundImage = this.style.backgroundImage;
                that.bigBox.style.backgroundImage = this.style.backgroundImage;
            }
        }
    }

    eventBind() {
        this.mouseover();
        this.mouseout();
        this.mousemove();
        this.clickLi()
    }
}
let oSmallBox = document.querySelector(".small-box");
let oMask = document.querySelector(".mask");
let oBigBox = document.querySelector(".big-box");
let oLis = document.getElementsByTagName("li");
let mk = new Mk(oSmallBox, oMask, oBigBox, oLis);
mk.eventBind()
window.onload = clock;
function clock() {
    let today = new Date(),
        h = today.getHours(),
        m = today.getMinutes(),
        s = today.getSeconds();
    let stopTime = new Date("Feb 28 2022 00:00:00"),
        stopH = stopTime.getHours(),

            stopM = stopTime.getMinutes(),

            stopS = stopTime.getSeconds();

      
    var shenyu = stopTime.getTime() - today.getTime(), //倒计时毫秒数

            shengyuD = parseInt(shenyu / (60 * 60 * 24 * 1000)), //转换为天

            D = parseInt(shenyu) - parseInt(shengyuD * 60 * 60 * 24 * 1000), //除去天的毫秒数

            shengyuH = parseInt(D / (60 * 60 * 1000)), //除去天的毫秒数转换成小时

            H = D - shengyuH * 60 * 60 * 1000, //除去天、小时的毫秒数

            shengyuM = parseInt(H / (60 * 1000)), //除去天的毫秒数转换成分钟

            M = H - shengyuM * 60 * 1000; //除去天、小时、分的毫秒数

        
    S = parseInt((shenyu - shengyuD * 60 * 60 * 24 * 1000 - shengyuH * 60 * 60 * 1000 - shengyuM * 60 * 1000) / 1000) //除去天、小时、分的毫秒数转化为秒

         document.getElementById("div").innerHTML = (shengyuD + "天" + shengyuH + "小时" + shengyuM + "分" + S + "秒");
    var timer = setTimeout(clock, 500)
}
let num = 0;
$(".btn2").click(function() {

    if (num < 5) {
        num = num + 1;
        $(".goods-num").html(num);
    }
})
$(".btn1").click(function() {
    if (num > 0) {
        num = num - 1;
        $(".goods-num").html(num);
    }
})